<template>
  <div class="maincontent">
    <div style="width:58%">
      <div>
        <label>串口号:</label>
        <select style="width:100px;margin-left:15px;padding:5px;">
          <option value="com1">com1</option>
          <option value="com2">com2</option>
          <option value="com3">com3</option>
          <option value="com4">com4</option>
        </select>
        <span class="open1">已打开</span>
        <button class="button1 clo" disabled>打开串口</button>
        <button class="button1" style="padding:5px 20px">暂停</button>
        <button class="button1" style="padding:5px 20px">退出</button>
        <span>
          运行时间：
          <span>1705s</span>
        </span>
      </div>
      <div style="display: flex;justify-content: space-between;margin: 15px 5px 15px 0">
        <div class="itemtwo">
          数据存储位置：
          <span>D:\okosdfdso\sdasdasda\asdad</span>
        </div>
        <div class="itemtwo">
          检验状态：
          <span>Right</span>
        </div>
      </div>
      <div>
        <h3 style="padding-left:15px">状态参数</h3>
        <div style="display: flex;justify-content: space-between;padding:20px 20px 0 20px">
          <div v-for="(item, index) in tuoluo" :key="index" class="itemchouse">
            <label>{{item.name}}:</label>
            <input type="text" style="width:120px" :value="item.value" />
          </div>
        </div>
        <div style="display: flex;justify-content: space-between;padding:20px 20px 0 20px">
          <div v-for="(item, index) in tuoluo2" :key="index" class="itemchouse">
            <label>{{item.name}}:</label>
            <input type="text" style="width:118px" :value="item.value" />
          </div>
        </div>
      </div>
      <div>
        <el-tabs type="border-card" style="margin:35px 0px">
          <el-tab-pane label="A">
            <echartszx :itemval="itemval"></echartszx>
            <echartszx :itemval="itemval1"></echartszx>
            <echartszx :itemval="itemval2"></echartszx>
            <!-- <div id="myChart" style="width:800px;height:200px"></div>
            <div id="myChart2" style="width:800px;height:200px"></div>
            <div id="myChart3" style="width:800px;height:200px"></div>-->
          </el-tab-pane>
          <el-tab-pane label="G">
            <echartszx :itemval="itemval3"></echartszx>
            <echartszx :itemval="itemval4"></echartszx>
            <echartszx :itemval="itemval5"></echartszx>
            <!-- <div id="myChart4" style="width:800px;height:200px"></div>
            <div id="myChart5" style="width:800px;height:200px"></div>
            <div id="myChart6" style="width:800px;height:200px"></div>-->
          </el-tab-pane>
          <el-tab-pane label="T">
            <echartszx :itemval="itemval6"></echartszx>
            <echartszx :itemval="itemval7"></echartszx>
            <echartszx :itemval="itemval8"></echartszx>

            <!-- <div id="myChart7" style="width:800px;height:200px"></div>
            <div id="myChart8" style="width:800px;height:200px"></div>
            <div id="myChart9" style="width:800px;height:200px"></div>-->
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import echartszx from '~/components/echartszx.vue'
export default {
  components: {
    echartszx
  },
  data() {
    return {
      itemval: {
        id: 'macharts',
        title: 'AX',
        dataY: [
          120,
          1932,
          201,
          1934,
          290,
          1730,
          320,
          1820,
          132,
          1101,
          234,
          1990,
          130,
          1320,
          220,
          932,
          101,
          934,
          90,
          1330,
          220,
          820
        ],
        dataX: [
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
          12,
          13,
          14,
          15,
          16,
          17,
          18,
          19,
          20,
          21,
          22,
          23
        ]
      },
      itemval8: {
        id: 'macharts8',
        title: 'TZ',
        dataY: [
          120,
          1932,
          201,
          1934,
          290,
          1330,
          1320,
          1820,
          132,
          1901,
          234,
          1290,
          130,
          1320,
          220,
          932,
          101,
          1934,
          90,
          1330,
          220,
          1820
        ],
        dataX: [
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
          12,
          13,
          14,
          15,
          16,
          17,
          18,
          19,
          20,
          21,
          22,
          23
        ]
      },
      itemval1: {
        id: 'macharts1',
        title: 'AY',
        dataY: [
          220,
          1932,
          201,
          1934,
          200,
          1830,
          320,
          1820,
          132,
          1901,
          234,
          1090,
          130,
          1320,
          220,
          932,
          101,
          934,
          90,
          1330,
          220,
          820
        ],
        dataX: [
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
          12,
          13,
          14,
          15,
          16,
          17,
          18,
          19,
          20,
          21,
          22,
          23
        ]
      },
      itemval2: {
        id: 'macharts2',
        title: 'AZ',
        dataY: [
          120,
          932,
          201,
          934,
          190,
          1330,
          320,
          820,
          132,
          1901,
          234,
          1990,
          130,
          1320,
          220,
          932,
          101,
          934,
          90,
          1330,
          220,
          1820
        ],
        dataX: [
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
          12,
          13,
          14,
          15,
          16,
          17,
          18,
          19,
          20,
          21,
          22,
          23
        ]
      },
      itemval3: {
        id: 'macharts3',
        title: 'GX',
        dataY: [
          120,
          932,
          201,
          934,
          290,
          1330,
          320,
          820,
          132,
          901,
          234,
          1290,
          130,
          1320,
          220,
          932,
          101,
          934,
          90,
          1330,
          220,
          820
        ],
        dataX: [
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
          12,
          13,
          14,
          15,
          16,
          17,
          18,
          19,
          20,
          21,
          22,
          23
        ]
      },
      itemval4: {
        id: 'macharts4',
        title: 'GY',
        dataY: [
          120,
          932,
          201,
          934,
          290,
          1330,
          320,
          820,
          132,
          901,
          234,
          1290,
          130,
          1320,
          220,
          932,
          101,
          934,
          90,
          1330,
          220,
          820
        ],
        dataX: [
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
          12,
          13,
          14,
          15,
          16,
          17,
          18,
          19,
          20,
          21,
          22,
          23
        ]
      },
      itemval5: {
        id: 'macharts5',
        title: 'GT',
        dataY: [
          120,
          932,
          201,
          934,
          290,
          1330,
          320,
          820,
          132,
          901,
          234,
          1290,
          130,
          1320,
          220,
          932,
          101,
          934,
          90,
          1330,
          220,
          820
        ],
        dataX: [
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
          12,
          13,
          14,
          15,
          16,
          17,
          18,
          19,
          20,
          21,
          22,
          23
        ]
      },
      itemval6: {
        id: 'macharts6',
        title: 'TX',
        dataY: [
          120,
          932,
          201,
          934,
          290,
          1330,
          320,
          820,
          132,
          901,
          234,
          1290,
          130,
          1320,
          220,
          932,
          101,
          934,
          90,
          1330,
          220,
          820
        ],
        dataX: [
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
          12,
          13,
          14,
          15,
          16,
          17,
          18,
          19,
          20,
          21,
          22,
          23
        ]
      },
      itemval7: {
        id: 'macharts7',
        title: 'TY',
        dataY: [
          120,
          932,
          201,
          934,
          290,
          1330,
          320,
          820,
          132,
          901,
          234,
          1290,
          130,
          1320,
          220,
          932,
          101,
          934,
          90,
          1330,
          220,
          820
        ],
        dataX: [
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
          12,
          13,
          14,
          15,
          16,
          17,
          18,
          19,
          20,
          21,
          22,
          23
        ]
      },
      tuoluo: [
        { name: 'X陀螺', value: '-23723.0' },
        { name: 'Y陀螺', value: '-26.0' },
        { name: 'Z陀螺', value: '-24620.0' },
        { name: '温度', value: '37.4' }
      ],
      tuoluo2: [
        { name: 'X加表', value: '9333.0' },
        { name: 'Y加表', value: '-5049.0' },
        { name: 'Z加表', value: '1437690.0' },
        { name: '计数器', value: '1333232' }
      ]
    }
  }
}
</script>
<style>
.maincontent {
  display: flex;
  justify-content: space-around;
  margin: 20px;
}
.open1 {
  display: inline-block;
  padding: 0px 10px;
}
.button1 {
  padding: 6px;
  margin: 0 15px;
}
.button2 {
  padding: 15px;
  margin-left: 70px;
  margin-right: 5px;
}
.clo {
  background: #fff;
  /* box-shadow: none; */
  border-radius: 3px;
  color: #d5d9e6;
  border-style: double;
}
.itemtwo {
  display: inline-block;
}
.itemchouse {
  padding: 5px;
}
</style>